<template>
	<view class="content">
		<nav class="top-navbar scrollhide" style="display: flex;">
			<div class="navbar-brand">TouchMed</div>
			<div><h2 data-text="LET'SGOTOFUTURE">LET'SGOTOFUTURE</h2></div>
			<div style="flex-grow: 2;"></div>
			<div>
				<img src="/static/fangdajing.svg" alt="SVG" style="margin-right: 50rpx;" />
				<img src="/static/caidan.svg" alt="SVG" />
			</div>
		</nav>
		<div class="container">
			<div id="slide"> 
				<div class="item" style="background-color: aquamarine;">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
				<div class="item" style="background-color:blueviolet">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
				<div class="item" style="background-color:burlywood;">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
				<div class="item" style="background-color:chocolate;">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
				<div class="item" style="background-color:cornflowerblue;">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
				<div class="item" style="background-color:darkmagenta;">
					<div class="cont">
						<div class="name">Touch Med</div>
						<div class="des">Go To The Future With Us</div>
						<div class="btn"><a href="">Learn More</a></div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 200px;padding-top: 40px;">
			<div style="height: 500px;background-color: aqua;" class="mygroup">
				<img src="/static/AI.svg" alt="SVG" />
				<button>See more</button>
			</div>
			<div style="height: 500px;background-color: bisque;" class="mystudy">
				<div>
					<div>Our AI Lab</div>
					<div>See Our Data<img src="/static/youjiantou.svg" alt="SVG" /></div>
				</div>
			</div>
			<div style="height: 500px;background-color: beige;" class="myai">
				<div>
					ConcertAI Expands
					<button>Read Me</button>
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
				<div>
					ConcertAi Enters
					<button>Read Me</button>
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
				<div>
					Bristol-Myers
					<button>Read Me</button>
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
			</div>
			<div>
				<div>
					AML
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
				<div>
					Bladder
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
				<div>
					Breast
					<img src="/static/youjiantou.svg" alt="SVG">
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		mounted() {
			// document.querySelectorAll('.s_button')[1].onclick = () => {
			// 	let lists = document.querySelectorAll('.item');
			// 	document.querySelector('#slide').appendChild(lists[0]);
			// }
			// document.querySelectorAll('.s_button')[0].onclick = () => {
			// 	let lists = document.querySelectorAll('.item');
			// 	document.querySelector('#slide').prepend(lists[lists.length-1]);
			// }
			let _direction = true;
			let _move = () => {
				let lists = document.querySelectorAll('.item');
				if(_direction){
					document.querySelector('#slide').appendChild(lists[0]);
				}else{
					document.querySelector('#slide').prepend(lists[lists.length-1]);
				}
			}
			
			
			let timer = setInterval(_move,5000);
			document.querySelector('.container').addEventListener('mouseover',()=>{
				clearInterval(timer);
			})
			document.querySelector('.container').addEventListener('mouseout',()=>{
				timer = setInterval(_move,5000);
			})
			document.querySelectorAll('.s_button')[1].onclick = () => {
				_direction = true;
				_move()
			}
			document.querySelectorAll('.s_button')[0].onclick = () => {
				_direction = false;
				_move()
			}
			// document.querySelector('#top-navbar-toggle').addEventListener('click', () => {
			//     document.querySelector('.top-navbar').classList.toggle('show')
			// })
						
			// for (let elem of document.querySelectorAll('.side-nav-list .nav-item')) {
			//     elem.addEventListener('click', function () {
			//         document.querySelector('.side-nav-list .nav-item.active').classList.remove('active');
			//         elem.classList.add('active')
			//     })
			// }
			// document.querySelector('#toggle-side-nav-btn').addEventListener('click', function () {
			//     document.querySelector('.side-nav-wrap').classList.toggle('show');
			//     document.querySelector(".side-nav-wrap").classList.remove('transparent');
			//     (this).classList.toggle('fa-reorder');
			//     (this).classList.toggle('fa-close');
			// });
			
			
		},
		onPageScroll(e) {
			if(e.scrollTop > 60 && e.scrollTop < 140){
				document.querySelector('.scrollhide').classList.add('fixed-normal-height')
			}
			else{
				document.querySelector('.scrollhide').classList.remove('fixed-normal-height')
			}
		},
		onLoad() {

		},
		methods: {
			onScrollToUpper(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	section
	{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		height:100vh;
		overflow: hidden;
	}
	.pattern
	{
		position: relative;
		transform-style: preserve-3d;
		perspective: 1000px;
	}
	.pattern .face
	{
		position: relative;
		width: 100%;
		height: 50vh;
		
	}
	
	h2{
		position: relative;
		top:6px;
		// font-size: 14vw;
		font-size:24px;
		color: #0c3675;
		-webkit-text-stroke: 0.3vw #383d52;
		// -webkit-text-stroke: 2px #383d52;
		text-transform: uppercase;
	}
	h2::before{
		content: attr(data-text);
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		color:#01fe87;
		-webkit-text-stroke:#383d52;
		border-right: 2px solid #01fe87;
		overflow: hidden;
		animation: animate 6s linear infinite;
	}
	
	@keyframes animate{
		0%, 10%, 100%
		{
			width: 0;
		}
		70%,90%
		{
			width:100%;
		}
	}
	
	/* 鼠标滚动透明 */
	.scrollhide.transparent {
		opacity: 0;
	}
	
	/* 普通高度 */
	.scrollhide.fixed-normal-height {
		height: 80px;
		margin-top: 60px;
	}
	
	.scrollhide.transparent:hover {
		opacity: 1;
	}
	
	/* 顶部导航栏 */
	.top-navbar {
		// position: fixed;
		// top: 0;
		// left: 0;
		width: 100vw;
		/* height: var(--top-navbar-ht); */
		height: 140px;
		// min-height: var(--top-navbar-ht);
		padding: 0 1.5rem 0.5rem 0;
		gap: 0.5rem;
	
		display: flex;
		align-items: center;
		// background-color: #fff8;
		background-color: #0c3675;
		backdrop-filter: blur(5px);
		z-index: 1000;
		transition: all 0.3s;
	}
	
	/* 网站图标等 */
	.top-navbar .navbar-brand {
		height: calc(var(--top-navbar-ht) - 0.5rem);
		padding: 0 1em;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: bold;
		flex: none;
		color: white;
	}
	
	/* 控制顶部导航栏展开或折叠 */
	.top-navbar #top-navbar-toggle {
		position: absolute;
		display: none;
		top: 1rem;
		right: 2rem;
		background-color: transparent;
		font-size: 1.5rem;
		cursor: pointer;
	}
	
	/* 导航栏导航列表 */
	.top-navbar .navbar-nav-wrap .nav-list {
		display: flex;
		gap: 0.5em;
		font-size: 17px;
		font-weight: bold;
	}
	
	.top-navbar .navbar-nav-wrap .nav-list .nav-item {
		position: relative;
		display: block;
		padding: 0 0.5em;
	
		color: #000;
		cursor: pointer;
		flex-shrink: 0;
		transition: all 0.2s ease;
	}
	
	.top-navbar .navbar-nav-wrap .nav-list .nav-item.active,
	.top-navbar .navbar-nav-wrap .nav-list .nav-item:hover {
		color: var(--light-blue-color);
	}
	
	/* 二级级导航列表 */
	.nav-item.sub-nav-wrap::after {
		position: absolute;
		content: '';
		top: 50%;
		margin-left: 3px;
		transform: translateY(-50%);
		border-top: .3em solid;
		border-right: .3em solid transparent;
		border-bottom: 0;
		border-left: .3em solid transparent;
	}

	.nav_div{
		background-color: #0c3675;
		display: inline-flex;
		display: -webkit-flex;
		height: 280rpx;
		// justify-content: space-around;
		padding-left: 160rpx;
		padding-right: 160rpx;
		align-items: center;
		.nav_logo {
			color: white;
		}
		.nav_logo text{
			margin-left: 50px;
		}
		.nav_space{
			flex-grow: 2;
		}
		.nav_menu{
			
		}
	}
	.content {
		background-color: #eaeaea;
		overflow: hidden;
		font-family: 'poppins',sans-serif;
	}
	.container{
		width: 100vw;
		height: 740px;
		background-color: #f5f5f5;
		padding: 50px;
		box-shadow: 0 30px 50px #dbdbdb;
	}
	#slide{
		width: max-content;
		margin-top: 50px;
	}
	.item{
		width: 300px;
		height: 640px;
		background-position: 50% 50%;
		display: inline-block;
		background-size: cover;
		position: absolute;
		// position: relative;
		top:290px;
		// transform: translateY(-50%);
		margin-top: -150px;
		border-radius: 20px;
		box-shadow: 0 30px 50px #505050;
		transition: .5s;
	}
	.item:nth-child(1),
	.item:nth-child(2){
		font-size: 80rpx;
		top:140px;
		left:0;
		width:100%;
		height:740px;
		// transform: translateY(0);
		margin-top: 0px;
		border-radius: 0;
		box-shadow: none;
	}
	.item:nth-child(3){
		left:50%;
		font-size: 30px;
	}
	.item:nth-child(4){
		font-size: 30px;
		left:calc(50% + 300px);
	}
	.item:nth-child(5){
		font-size: 30px;
		left:calc(50% + 600px);
	}
	.item:nth-child(n + 6){
		font-size: 30px;
		left:calc(50% + 900px);
		opacity: 0;
	}
	.item .cont{
		width: 300px;
		position:absolute;
		left:100px;
		top:50%;
		transform: translateY(-50%);
		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		color: #999;
		// display: none;
		display: block;
	}
	.item:nth-child(2) .cont{
		display: block;
	}
	.item .name{
		// font-size: 40px;
		font-weight: bold;
		opacity: 0;
		animation: showcontent 1s ease-in-out 1 forwards;
	}
	.item .des{
		margin: 20px 0;
		opacity: 0;
		animation: showcontent 1s ease-in-out 0.3s 1 forwards;
	}
	.btn{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		bottom: 0;
		left:0;
		width:250px;
		height: 50px;
		// font-size: 15px;
		// margin-top: 300px;
		// width: 200px;
		// padding: 10px 20px;
		// border: none;
		// opacity: 0;
		animation: showcontent 1s ease-in-out 0.6s 1 forwards;
		// background: rgba(0, 0, 0, 0.3);
		// color: #fff;

	}
	.btn a{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		top:0;
		left:0;
		background: rgba(255,255,255,0.05);
		color:#fff;
		box-shadow: 0 15px 15px rgba(0,0,0,0.3);
		border-bottom: 1rpx solid rgba(255,255,255,0.1);
		border-top: 1px solid rgba(255,255,255,0.1);
		backdrop-filter: blur(15px);
		border-radius: 30px;
		padding:10px;
		text-decoration: none;
		letter-spacing: 1px;
		overflow: hidden;
		font-weight: 400px;
		z-index: 1;
		transition: 0.5s;
	}
	.btn:hover a{
		letter-spacing: 3px;
	}
	
	.btn a::before{
		content:"";
		position: absolute;
		top:0;
		left:0;
		width: 50%;
		height: 100%;
		background: linear-gradient(to left,rgba(255,255,255,0.15),transparent);
		transform: skewX(45deg) translate(0);
		filter:blur(0px);
		transition: .5s;
	}
	
	.btn:hover a::before{
		transform: skewX(45deg) translate(200px);
	}
	
	.btn::before{
		content: "";
		position: absolute;
		background: #00f;
		width: 30px;
		height: 10px;
		left:50%;
		bottom: -5px;
		transform: translateX(-50%);
		border-radius: 10px;
		transition: .5s;
		transition-delay: .5s;
	}
	.btn:hover::before{
		bottom: 0;
		height: 50%;
		width:80%;
		border-radius: 30px;
	}
	
	.btn::after{
		content: "";
		position: absolute;
		background: #00f;
		width: 30px;
		height: 10px;
		left:50%;
		top: -5px;
		transform: translateX(-50%);
		border-radius: 10px;
		transition: .5s;
		transition-delay: .5s;
	}
	.btn:hover::after{
		top: 0;
		height: 50%;
		width:80%;
		border-radius: 30px;
	}
	
	.btn::before,
	.btn::after{
		background: #2db2ff;
		box-shadow: 0 0 5px #2db2ff,
		0 0 15px #2db2ff,
		0 0 30px #2db2ff,
		0 0 60px #2db2ff;
	}
	
	
	@keyframes showcontent{
		from{
			opacity: 0;
			transform: translateY(100px);
			// 滤镜模糊度
			filter: blur(20px);
		}to{
			opacity: 1;
			transform: translateY(0);
			// 滤镜模糊度
			filter: blur(0);
		}
	}
	
	.buttons{
		// border: 1rpx solid #999;
		width:100%;
		position: absolute;
		top:570px;
		margin: 0 auto;
		left:50%;
		margin-left: -50%;
		text-align: center;
	}
	.s_button{
		display: inline-block;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color:gray;
		background-color: #fff;
		font-size: 25px;
		border-radius: 50%;
		font-weight: bold;
		border:1px solid #555;
		margin: 0 25px;
		transition: .5s;
	}
	.s_button:hover{
		cursor: pointer;
		background-color: #ccc;
	}
	
	.mygroup{
		margin-top: 40px;
		// transform: translateY(50%);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	.mygroup img{
		width: 50px;
	}
	.mygroup button{
		// display: block;
		width: 100px;
		height: 30px;
		line-height: 30px;
	}
	.mystudy{
		margin-top: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.myai{
		margin-top: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.myai div{
		width: 200px;
		padding: 20px;
		// border: 1rpx solid #ccc;
		margin: 10px;
		height: 300px;
		// border-radius: 20px;
		box-shadow: 0 30px 50px #505050;
	}
	.myai div button{
		width: 100px;
	}
	.myai div img{
		position: relative;
		top:-28px;
		left: 110px;
	}
	
	.logo {
		height: 100rpx;
		width: 100rpx;
		// margin-top: 200rpx;
		// margin-left: auto;
		// margin-right: auto;
		// margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
